<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>今日头条首页</title>
<script type="text/javascript" src="/resource/js/jquery-3.2.1/jquery.js"></script>
<script type="text/javascript" src="/resource/bootstrap-4.5.0-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="/resource/bootstrap-4.5.0-dist/css/bootstrap.css">
<link rel="stylesheet" href="/resource/css/index.css">
</head>
<body>	
	<div class="container">
		<!-- 上方展示区 -->
		
		<hr>
		<!-- //下方展示区 -->
		<div class="row">
			<!-- 左侧导航 -->
			<div class="col-md-2 channel">
				<ul>
					<!-- 栏目导航 -->
					<!-- 图片 -->
					<li><a href="/"><img alt="" src="/resource/images/logo-index.png" width="120"></a></li>
					<br>
					
					<!-- 热点 -->
					<li><a href="/" class="channel-item ${article.channelId==null?'active':'' }">热点</a></li>
						  	
					<!-- 栏目数据 -->
					<c:forEach items="${channels }" var="channel">
						  <li><a href="/?channelId=${channel.id }" class="channel-item ${article.channelId==channel.id?'active':''}">${channel.name }</a></li>
					</c:forEach>
				</ul>
			</div>
			<!-- 中间展示区 -->
			<div class="col-md-8">
				<!-- 栏目频道 -->
				<c:if test="${article.channelId!=null }">
					<div class="subchannel row" >
						<ul>
							<!-- 展示全部数据 -->
							<a href="/?channelId=${article.channelId }" class="sub-item  ${article.categoryId==null?'sub-selected':'' }">全部</a>
							<!-- 所有类别数据展示 -->
							<c:forEach items="${categories }" var="category">								
								<a href="/?channelId=${article.channelId }&categoryId=${category.id}" 
								class="sub-item ${article.categoryId==category.id?'sub-selected':'' }">${category.name }</a>			
							</c:forEach>							
						</ul>
					</div>
				
				</c:if>
				<!-- 热点数据 -->
				
				<!-- 轮播图 -->
				<c:if test="${article.channelId ==null }">
					<div>
						<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
							  <ol class="carousel-indicators">
							  
							  	<!-- 用于计算轮播图的个数 -->
							  	<c:forEach items="${slides }" var="slide" varStatus="i">
							    	<li data-target="#carouselExampleCaptions" data-slide-to="${i.index }"  class="${i.index==0?'active':'' }"></li>
							    </c:forEach>
		
							  </ol>
							  <div class="carousel-inner">
							  
							  	<!-- 用于展示轮播图图片 -->
							  	<c:forEach items="${slides }" var="slide" varStatus="i">
							  	
								    <div class="carousel-item ${i.index==0?'active':'' }">
								      <img src="${slide.picture }" class="d-block w-100" alt="..." width="700" height="400">
								      <div class="carousel-caption d-none d-md-block">
								        <h5>${slide.title }</h5>
								      </div>
								    </div>
								    
							 	</c:forEach>
							 	
							  </div>
							  <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
							    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
							    <span class="sr-only">上一个</span>
							  </a>
							  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
							    <span class="carousel-control-next-icon" aria-hidden="true"></span>
							    <span class="sr-only">下一个</span>
							  </a>
							</div>
						</div>	
					</c:if>				
					<hr>

				
				<!-- 热点文章 -->	
				<div>
					<c:forEach items="${info.list }" var="art">
						<!-- 文章详情链接 -->
						<a href="detail?articleId=${article.id }">					
							<!-- 将图片和文字写到一行 -->
							<div class="row">	
								<!-- 文章标题图片 -->
								<div class="col-md-2">												
									<img alt="" src="${art.picture }" width="100px" height="100px">								
								</div>
								<div class="col-md-10">			
									<div class="title-box">${art.title }</div>
									<br>
									${art.userName }·${art.hits }点击·${art.displayTime }
								</div>
								
							</div>
							<hr>							
						</a>
					</c:forEach>
				</div>	
				<jsp:include page="/WEB-INF/view/commons/pages.jsp"></jsp:include>	
			</div>
			<!-- 右侧导航 -->
			<div class="col-md-2">
				<!-- 24小时热文 -->
				<div class="card" style="width: 18rem;">
				  <div class="card-header title-box">24小时热文</div>				  
				  <ul class="list-group list-group-flush">
				  	<c:forEach items="${info24Hot.list }" var="article">
				    	<li class="list-group-item">
				    		<a href="detail?articleId=${article.id }">${article.title }</a>
				    	</li>
				    </c:forEach>				    
				    <li><br></li>
				  </ul>				  
				</div>
				<!-- 点击量排行榜 -->
				<div class="card" style="width: 18rem;">
				  <div class="card-header title-box">点击量排行榜</div>
				  
				  <ul class="list-group list-group-flush">
				  	<c:forEach items="${infoHits.list }" var="article">
				    	<li class="list-group-item">
							<a href="detail?articleId=${article.id }">${article.title }</a>
						</li>
			   		</c:forEach>
				  </ul>
				</div>	
			</div>						
		</div>		
	</div>	
</body>
<script type="text/javascript">
	//分页
	function goPage(pageNum){
		//获取栏目频道和分类的id
		var channelId='${article.channelId}';
		var categoryId='${article.categoryId}';
		/* 分页参数 */
		var url="/?pageNum="+pageNum";
		拼接栏目频道和分类数据
		if(channelId !=null && channelId !=""){
			url +="&" + channelId;
			if(categoryId !=null && categoryId !=""){
				url+="&"+categoryId;
			}
		}
		
		location=url;
	}

</script>
</html>
